<div class="example-snippet">
    <div class="highlight-toolbar">
        @if (!HideExample)
        {
            <BootstrapTooltip Message="@CodeTooltip">
                <button type="button" class="btn btn-code" aria-label="show/hide code" @onclick="@ToggleCode">
                    @if (_showCode || FixCode)
                    {
                        <svg width="24" height="24" fill="#575757" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
                            <rect fill="none" height="24" width="24"></rect>
                            <path
                                d="M19.17,12l-3.88-3.88c-0.39-0.39-0.39-1.02,0-1.41l0,0c0.39-0.39,1.02-0.39,1.41,0l4.59,4.59c0.39,0.39,0.39,1.02,0,1.41 l-2.88,2.88L17,14.17L19.17,12z M2.1,4.93l3.49,3.49l-2.88,2.88c-0.39,0.39-0.39,1.02,0,1.41l4.59,4.59c0.39,0.39,1.02,0.39,1.41,0 l0,0c0.39-0.39,0.39-1.02,0-1.41L4.83,12L7,9.83L19.07,21.9c0.39,0.39,1.02,0.39,1.41,0l0,0c0.39-0.39,0.39-1.02,0-1.41L3.51,3.51 c-0.39-0.39-1.02-0.39-1.41,0l0,0C1.71,3.91,1.71,4.54,2.1,4.93z">
                            </path>
                        </svg>
                    }
                    else
                    {
                        <svg width="24" height="24" fill="#575757" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
                            <path d="M0 0h24v24H0V0z" fill="none"></path>
                            <path
                                d="M8.7 15.9L4.8 12l3.9-3.9c.39-.39.39-1.01 0-1.4-.39-.39-1.01-.39-1.4 0l-4.59 4.59c-.39.39-.39 1.02 0 1.41l4.59 4.6c.39.39 1.01.39 1.4 0 .39-.39.39-1.01 0-1.4zm6.6 0l3.9-3.9-3.9-3.9c-.39-.39-.39-1.01 0-1.4.39-.39 1.01-.39 1.4 0l4.59 4.59c.39.39.39 1.02 0 1.41l-4.59 4.6c-.39.39-1.01.39-1.4 0-.39-.39-.39-1.01 0-1.4z">
                            </path>
                        </svg>
                    }
                </button>
            </BootstrapTooltip>
        }
    </div>
    @if (!HideExample)
    {
        <div class="example">
            <DynamicComponent Type="@Component" Parameters="@ComponentParameters" />
        </div>
    }
    <BootstrapCollapse Open="@(_showCode || FixCode || HideExample)">
        <div class="highlight">
            <CodeSnippet Language="@Language" Class="example-code">@CodeContents</CodeSnippet>
        </div>
    </BootstrapCollapse>
</div>